<template>
	<view class="comment-box">
		<view class="">
			<view v-if="datashow==true">
				<span style="color: red; margin-left: 25rpx;">{{ text }}</span>
			</view>
			<view class="cord">
				<h5 style="margin: 10rpx; font-size: 36rpx;">拍摄并上传身份证照片</h5>
				<view class="" style="color: #ccc;margin: 20rpx 10rpx; font-size: 26rpx; ">
					请保证身份证完整，身份证号清晰
				</view>
				<view class="">
					<view style="color: #9dafbc; margin: 23rpx 0; font-size: 28rpx;margin-left: 10rpx;">
						正面照
					</view>
					<view class="u-flex u-flex-around  u-flex-items-center">
						<view class="">
							<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="6" multiple
								:maxCount="1" width="590rpx" height="300rpx">
								<view>
									<image src="../static/images/zheng.png" mode="widthFix"
										style="width: 590rpx;height: 300rpx;"></image>
								</view>
							</u-upload>
						</view>
					</view>
					<view style="color: #9dafbc; margin: 23rpx 0; font-size: 28rpx;margin-left: 10rpx;">
						反面照
					</view>
					<view class="u-flex u-flex-around  u-flex-items-center">
						<view class="">
							<u-upload :fileList="fileList2" @afterRead="card_noafterRead" @delete="card_nodeletePic"
								name="6" multiple :maxCount="1" width="590rpx" height="300rpx">
								<view>
									<image src="../static/images/fan.png" mode="widthFix"
										style="width: 590rpx;height: 300rpx;"></image>
								</view>
							</u-upload>
						</view>
					</view>
				</view>
			</view>
			<view class="cord">
				<h5 style="margin: 10rpx; font-size: 36rpx;">确认身份信息</h5>
				<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
					<u-form-item prop="userInfo.real_name" ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">姓名<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="model1.userInfo.real_name" disabledColor="#f5f6fa"
								placeholder="请输入姓名" border="none"></u--input>
						</view>
					</u-form-item>
					<u-form-item prop="userInfo.card_no" ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">身份证号<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="model1.userInfo.card_no" disabledColor="#f5f6fa"
								placeholder="请输入身份证号" border="none"></u--input>
						</view>
					</u-form-item>
				</u--form>
			</view>
			<view class="cord">
				<div style="margin: 10rpx; font-size: 36rpx;">设置密码
				<div style="margin: 10rpx; font-size: 24rpx;color: #9b938f">请输入包含英文或数字的8位密码</div>
				</div>
				<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
					<u-form-item prop="userInfo.real_name" ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">密码<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="model1.userInfo.password" type="password"
								disabledColor="#f5f6fa" placeholder="请输入密码" border="none"></u--input>
						</view>
					</u-form-item>
					<u-form-item prop="userInfo.card_no" ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">确认密码<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="model1.userInfo.password_confirm" type="password"
								disabledColor="#f5f6fa" placeholder="请输入确认密码" border="none"></u--input>
						</view>
					</u-form-item>
				</u--form>
			</view>
			<view class="submitbox" @click="submits">
				<!-- 下一步：设置结算账户 -->
				提交审核
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userhouse
	} from '@/api/landlord.js'
	export default {
		data() {
			return {
				datashow: false,
				text: '',
				show: true,
				fileList: [],
				fileList2: [],
				model1: {
					userInfo: {
						card_front: '',
						card_back: '',
						real_name: '',
						card_no: '',
						password: '',
						password_confirm: '',
					},
				},
				rules: {
					'userInfo.real_name': {
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.card_no': {
						type: 'string',
						required: true,
						message: '请输入身份证号',
						trigger: ['blur', 'change']
					},
					'userInfo.password': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
					'userInfo.password_confirm': {
						type: 'string',
						required: true,
						message: '请再次输入密码',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		onLoad(options) {
			if (options.data) {
				let data = JSON.parse(options.data)
				this.text = data.reason
				if (data.status == 2) {
					this.datashow = true
					this.text = data.reason
					this.fileList.push({
						url: data.card_front,
						urls: data.card_front

					})
					this.fileList2.push({
						url: data.card_back,
						urls: data.card_back

					})
					this.model1.userInfo = {
						card_front: data.card_front,
						card_back: data.card_back,
						real_name: data.real_name,
						card_no: data.card_no,
					}
				} else {
					this.datashow = false
				}
			}
		},
		methods: {
			submits() {
				this.$refs.uForm.validate().then(res => {
					if (this.fileList.length == 0) {
						uni.$u.toast('请上传身份证正面')
						return
					} else {
						this.fileList.forEach(e => {
							console.log(e);
							this.model1.userInfo.card_front = e.urls
						});
					}
					if (this.fileList2.length == 0) {
						uni.$u.toast('请上传身份证反面')
						return
					} else {
						this.fileList2.forEach(e => {
							console.log(e);
							this.model1.userInfo.card_back = e.urls
						});
					}
					userhouse({
						...this.model1.userInfo,
					}).then(res => {
						uni.$u.toast(res.data.msg)
						setTimeout(() => {
							uni.navigateBack({
								delta: 1 // 返回的页面层级，1表示返回上一页
							});
						}, 1000);
					})
				})
			},
			card_nodeletePic(e) {
				this['fileList2'].splice(0, 1);
			},
			// 反面
			async card_noafterRead(event) {
				const item = event.file[0];
				// 获取本地读取文件路径
				const url = item.url;
				//result为上传成功的响应数据
				let result = await this.uploadFilePromise(url);
				console.log(result);
				this['fileList2'].push({
					...item,
					//提示上传中
					status: 'success',
					message: '上传成功',
					urls: result.url
				});

			},
			// 身份正面删除
			deletePic(e) {
				this['fileList'].splice(0, 1);
			},
			// 回显上传本地图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				const item = event.file[0];
				// 获取本地读取文件路径
				const url = item.url;
				//result为上传成功的响应数据
				let result = await this.uploadFilePromise(url);
				console.log(result);
				this['fileList'].push({
					...item,
					//提示上传中
					status: 'success',
					message: '上传成功',
					urls: result.url
				});
			},
			// 上传图片
			uploadFilePromise(url) {
				// token
				const token = uni.getStorageSync('userInfo').token;
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						// 完整上传路径 H5端需要解决跨域问题
						url: `${this.$Config.HTTP_REQUEST_URL}/api/common/upload`,
						// 本地上传读取到的url
						filePath: url,
						name: 'file',
						// 请求头
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'token': token
						},
						// 附加表单对象
						formData: {
							user: 'test'
						},
						success: res => {
							// 这里res是普通对象，但是res.data为JSON字符串，需要转一下
							const result = JSON.parse(res.data);
							resolve(result.data);
						}
					});
				});
			},

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background: #f5f5f5;
	}

	.box-flex {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}

	.comment-box {
		box-sizing: border-box;
		padding: 15rpx;
	}

	.cord {
		margin: 30rpx 0;
		box-sizing: border-box;
		padding: 15rpx;
		background: #fff;
		border-radius: 15rpx;
	}

	.flexbox {
		border-radius: 12rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 30rpx;
		background-color: #f5f6fa;
		width: 100%;
		height: 98rpx;
	}

	.submitbox {
		width: 100%;
		margin: 0 auto;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		color: #fff;
		background-color: #fe4f04;
	}
</style>
